<template>

    <!-- 店铺列表 -->
    <div class="store-shops">

        <div class="store-shops-tabs">
            <ul>
                <li :class="{ active: value == item.id,error: item.shop_state == 2}" v-for="item in stores" :key="item.id" @click="setStore($event,item)">

                    <StoreIconName :item='item'></StoreIconName>
                    <UxToolTip v-if="item.shop_state == 2" content="Connection error" placement="top">
                        <svg-icon name="user-store-unlink" />
                    </UxToolTip>
                    <CommonBrandPreview v-else :tag="item.tag_design_info" :pack="item.pack_design_info" />
                </li>
            </ul>

            <UserSearchButton size="large" shape="solid" name="New store" icon="user-template-new" @click="dialog = true" />

        </div>

        <div class="store-relink" v-show="active && active.shop_state == 2">
            <svg-icon name="user-store-unlink" />
            <span>Your store was disconnected from PODpartner due to an authorization issue. Please reconnect the store to continue using our service.</span>
            <a @click="linkTo()">Reconnect</a>
        </div>

        <!-- 连接店铺 -->
        <UxDialog :visible="dialog" @close="dialog = false">
            <div class="store-connect">
                <h2>Connect your store and start selling your products</h2>
                <ul>
                    <li>
                        <img src="@/assets/images/store/store-connect-shopify.png" />
                        <strong>Shopify</strong>
                        <button @click="linkTo('shopify')"><svg-icon name="user-store-connect" /><span>Connect</span></button>
                        <p>Leading global eCommerce platform for online stores and retail systems</p>
                    </li>
                    <li>
                        <img src="@/assets/images/store/store-connect-etsy.png" />
                        <strong>Etsy</strong>
                        <button @click="linkTo('etsy')"><svg-icon name="user-store-connect" /><span>Connect</span></button>
                        <p>A world-famous marketplace unique and creative goods</p>
                    </li>
                    <li>
                        <img src="@/assets/images/store/store-connect-woo.png" />
                        <strong>WooCommerce</strong>
                        <button @click="linkTo('woocommerce')"><svg-icon name="user-store-connect" /><span>Connect</span></button>
                        <p>A customizable, open-source eCommerce solution</p>
                    </li>

                    <li v-loading="loading">
                        <img src="@/assets/images/store/store-connect-wix.png" />
                        <strong>Wix</strong>
                        <button @click="linkTo('wix')"><svg-icon name="user-store-connect" /><span>Connect</span></button>
                        <p>A free, user-friendly website building platform</p>
                    </li>

                    <li>
                        <img src="@/assets/images/store/store-connect-squ.png" />
                        <strong>Squarespace</strong>
                        <button @click="linkTo('squarespace')"><svg-icon name="user-store-connect" /><span>Connect</span></button>
                        <p>An all-in-one website builder featuring a powerful blogging tool</p>
                    </li>
                </ul>

            </div>
        </UxDialog>

    </div>

</template>

<script>

export default {
    props: {
        value: { type: [Number, String], default: 0 },
        stores: { type: Array, default: () => [] },
    },
    data () {
        return {
            loading: false,
            dialog: false,
        };
    },
    computed: {
        active () {
            return this.stores.find(i => i.id == this.value);
        }
    },
    methods: {
        setStore (event, item) {
            const target = event.target;

            if (target.closest('.brand-preview')) {
                // 品牌按钮点击拦截
            } else if (target.closest('.tooltip')) {
                // 重新关联图标点击不响应
            } else if (item.id == this.value) {
                // 相同
            }
            else {
                this.$emit('input', item.id);
                this.$emit('change', item.id);
            }
        },


        async linkTo (name) {

            const names = new Map([
                [1, 'shopify'],
                [2, 'etsy'],
                [3, 'wix'],
                [4, 'woocommerce'],
                [5, 'squarespace'],
            ])
            const store = name || names.get(this.active.shop_type)

            if (store == 'shopify') {
                window.open("https://apps.shopify.com/podpartner", "_blank");
            } else if (store == 'squarespace') {
                this.$router.push("/document/square-description");
                this.dialog = false;
            } else if (store == 'etsy') {
                this.$router.push("/document/etsy-description");
                this.dialog = false;
            } else if (store == 'wix') {
                if (this.loading)
                    return;
                this.loading = true;
                let opener = window.open("about:blank");
                let response = await this.$http('AppStore.getWixConnectUrl');
                if (response.code === 0) {
                    this.loading = false;
                    opener && (opener.location = response.data);
                }
                else {
                    this.loading = false;
                    this.$uxMessage.error(response.msg || "get connect url failure");
                    opener && opener.close();
                }
            } else if (store == 'woocommerce') {
                this.$router.push("/document/woo-description");
                this.dialog = false;
            }
        },
    },
    mounted () { },
};
</script>

<style lang="scss" scoped>
.store-shops {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.store-shops-tabs {
    display: flex;

    ul {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        margin-left: -3px;
        margin-top: -3px;
        flex: 1;

        li {
            display: flex;
            align-items: center;
            height: 40px;
            background: #ffffff;
            border-radius: 8px;
            border: 1px solid #e6e6e6;
            padding: 0 10px;
            margin: 3px;
            width: 228px;
            box-sizing: border-box;
            cursor: pointer;
            position: relative;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                right: 0px;
                height: 2px;
                background: transparent;
                transition: all 0.2s;
            }

            .shop-name {
                flex: 1;
                overflow: hidden;
                &::v-deep span {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .brand-preview {
                flex: none;
                background: none;
                cursor: default;
                height: 28px;
                &::v-deep {
                    li {
                        position: relative;
                        width: 26px;
                        height: 26px;
                        border-radius: 26px;
                        transition: all 0.2s;

                        & > img {
                            position: absolute;
                            width: 20px;
                            height: 20px;
                            left: 50%;
                            top: 50%;
                            margin-left: -10px;
                            margin-top: -10px;
                        }

                        &:hover {
                            background: rgba(0, 0, 0, 0.06);
                        }
                    }

                    .level-discount {
                        display: none;
                    }

                    .popper {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;

                        .popper-name {
                            width: 100%;
                            height: 100%;
                        }

                        strong {
                            display: none;
                        }
                    }
                }
            }

            // & > img {
            //     width: 20px;
            //     min-width: 20px;
            //     height: 20px;
            //     border-radius: 20px;
            //     margin-left: 6px;
            // }

            .tooltip::v-deep {
                width: 24px;
                height: 24px;
                margin-left: 6px;
                svg {
                    vertical-align: top;
                    width: 24px;
                    height: 24px;
                    color: #fff;
                }
            }

            &.error {
                border: 1px solid #eed6d7;
                background: rgba(153, 3, 6, 0.08);

                &:hover {
                    &::before {
                        background-color: #ef6f72;
                    }
                }
            }

            &:hover {
                &::before {
                    background-color: #f6b2cd;
                }
            }

            &.active {
                &::before {
                    background-color: #ea4c89;
                }

                &.error::before {
                    background-color: #db080d;
                }
            }
        }
    }
    &::v-deep {
        .popper-content {
            cursor: default;
        }
    }

    & > .user-search-button {
        width: 144px;
    }
}

.store-relink {
    display: flex;
    align-items: center;
    margin-top: 32px;
    background: rgba(153, 3, 6, 0.08);
    border-radius: 8px;
    padding: 12px;

    svg {
        width: 24px;
        height: 24px;
        color: #fff;
        margin-right: 4px;
    }

    span {
        flex: 1;
        font-size: 12px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #c62828;
        line-height: 24px;
    }
    a {
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #087196;
        line-height: 24px;
        cursor: pointer;
        margin-right: 12px;
        &:hover {
            text-decoration: underline;
            color: #287e9c;
        }
    }
}

.store-connect {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #555555;
    line-height: 20px;
    width: 1080px;
    min-height: 620px;

    h2 {
        padding-top: 40px;
        padding-bottom: 18px;
        text-align: center;
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
    }

    ul {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
    }

    li {
        width: calc(33.33% - 12px);
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #ebebeb;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
        margin: 6px;
        img {
            width: 32px;
            height: 32px;
        }
        strong {
            display: block;
            margin-top: 18px;
            font-size: 16px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 20px;
        }
        p {
            margin-top: 12px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;
            line-height: 20px;
        }

        button {
            position: absolute;
            right: 20px;
            top: 20px;
            width: 106px;
            height: 32px;

            svg {
                width: 16px;
                height: 16px;
                margin-right: 4px;
            }
        }
    }
}
</style>
